<template>
  <VChart class="chart" :option="option" autoresize />
</template>

<script setup>
import { ref } from 'vue'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart } from 'echarts/charts'
import {
  GridComponent,
  TooltipComponent,
  TitleComponent,
  LegendComponent
} from 'echarts/components'
import VChart from 'vue-echarts'

// 注册必需组件
use([
  CanvasRenderer,
  LineChart,
  GridComponent,
  TooltipComponent,
  TitleComponent,
  LegendComponent
])

// 模拟数据（kW单位）
// const chartData = ref([12, 18, 15, 24, 36, 42, 38, 28])
const chartData = ref([0, 0, 0, 0, 0, 0, 0, 0])

// 生成时间轴（03:00 ~ 24:00 间隔3小时）
const generateTimeAxis = () => {
  return Array.from({ length: 8 }, (_, i) => {
    const hour = (i * 3) + 3 // 从3点开始
    return `${hour.toString().padStart(2, '0')}:00`
  })
}

const option = ref({

  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    },
    formatter: params => {
      return `${params[0].axisValue}<br/>${params[0].marker} ${params[0].seriesName}: ${params[0].value} kW`
    }
  },
  grid: {
    left: '5%',
    right: '5%',
    top: '10%',
    bottom: '15%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: generateTimeAxis(),
    axisLabel: {
      color: '#9DADC4',
      formatter: value => value
    },
    axisLine: {
      lineStyle: {
        color: '#334E78'
      }
    }
  },
  yAxis: {
    type: 'value',
    name: '单位：kw',
    nameLocation: 'end',
    nameGap: 15,
    nameTextStyle: {
      color: '#F2FBFF',
    },
    axisLabel: {
      color: '#9DADC4',
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: '#334E78'
      }
    },
    splitLine: {
      lineStyle: {
        color: '#2B4574',
        type: 'dashed'
      }
    }
  },
  series: [
    {
      name: '实时负荷',
      type: 'line',
      smooth: true,
      symbol: 'none',
      // symbolSize: 8,
      data: chartData.value,
      itemStyle: {
        color: '#5470c6'
      },
      lineStyle: {
        color: '#1491FF',
        width: 3
      },
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
            offset: 0,
            color: '#145690'
          }, {
            offset: 1,
            color: '#062C61'
          }]
        }
      },
      label: {
        show: true,
        formatter: '{c} kW',
        position: 'top'
      }
    }
  ]
})
</script>

<style scoped>
.chart {
  width: 100%;
  height: 100%;
}
</style>